<template>
	<view>
		<header-bar :title=titleName>
			<uni-icons type="undo" size="23" slot="back"></uni-icons>
		</header-bar>
		<view class="head_top"></view>
		<view class="head_tab flex-row j_c">
			<view class="flex-column flex_1 tab_item">
				<text class="tab_price">15.8</text>
				<text>今日积分</text>
			</view>
			<view class="flex-column flex_1 tab_item">
				<text class="tab_price">99.4</text>
				<text>本月积分</text>
			</view>
			<view class="flex-column flex_1 tab_item">
				<text class="tab_price">30.5</text>
				<text>待领取积分</text>
			</view>
		</view>
		<view class="flex-row j_b tab_nv">
			<view class="flex-row">
				<image src="https://s2.loli.net/2022/05/29/LRVkSI6iBPg5rC3.png" class="nv_icon"></image>
				<text class="nv_text">规则说明</text>
			</view>
			<view class="flex-row">
				<image src="https://s2.loli.net/2022/05/29/1YN4MEdHulRjzvq.png" class="nv_icon_1"></image>
				<text class="nv_text">发放至导购用户</text>
			</view>
		</view>
		<view class="con">
			<view class="flex-row j_b mb36">
				<view class="flex-row tab_lsit">
					<block :wx:for="tab_lsit" wx:key="list">
						<view class="t_item" catchtap="tabNav" :data-index="index">
							{{item}}
						</view>
					</block>
				</view>
				<view class="flex-row one_re j_c">
					<image src="https://s2.loli.net/2022/05/29/lXDhu4QaNvJzw2O.png" class="c_icon"></image>
					<text>一键领取</text>
				</view>
			</view>
			<view :wx:if="hasData">
				<block :wx:for="10" wx:key="list">
					<view class="c_item">
						<view class="flex-row j_b">
							<view class="flex">
								<image src="https://s2.loli.net/2022/05/26/rdRQtgNxYy8WFIw.jpg" class="user_ava" />
								<view class="user_name text_ellipsis">猫猫没有猫耳朵</view>
							</view>
							<view class="item_staus error" :wx:if="false">领取失败</view>
							<view class="item_staus " :wx:if="false">待领取</view>
							<view class="item_staus flex-row" :wx:if="false">
								<image src="https://i.postimg.cc/qRRLS16Q/susu0.jpg" class="status_icon" />
								<text>领取成功</text>
							</view>
							<view class="item_staus flex-row">
								<image src="https://i.postimg.cc/qRRLS16Q/susu0.jpg" class="status_icon" />
								<text>领取等待中</text>
							</view>
						</view>
						<view class="flex-row j_b item_time">
							<view class="flex_1">出库流水号：1009028993</view>
							<view>2022-05-28 18:00:00</view>
						</view>
						<view class="flex-row j_b">
							<view>可得积分：10</view>
							<view class="flex-row">
								<view class="price">¥365.5</view>
								<view class="flex-row one_re j_c" wx:if="false">
									<image src="https://i.postimg.cc/qRRLS16Q/susu0.jpg" class="c_icon"></image>
									<text>立即领取</text>
								</view>
							</view>
						</view>
						<view :wx:if="true" class="mt18">
							积分领取：2022-6-10 18:00:00
						</view>
					</view>
				</block>
			</view>
			<view wx:else class="flex-column">
				<image src="https://i.postimg.cc/pXDp6RXq/susu3.jpg" class="guide_none_img" mode="aspectFill" />
				<text class="guide_no_txt">暂无数据，抓紧去办理出库领取奖励吧~</text>
			</view>
		</view>
	</view>
</template>

<script>
	var startPoint
	export default {
		data() {
			return {
				titleName:"我的积分",
				checkd: false,
				tab_lsit: ['待领取', '已领取'],
				curTab: 0,
				hasData: true,
				//按钮位置参数
				buttonTop: 0,
				buttonLeft: 0,
				windowHeight: '',
				windowWidth: '',
			}
		},
		tabNav(e) {
			let {
				index
			} = e.currentTarget.dataset;
			if (this.data.curTab === index || index === undefined) {
				return false;
			} else {
				this.setData({
					curTab: index,
				})
			}
		},
		buttonStart: function(e) {
			startPoint = e.touches[0] //获取拖动开始点
		},
		buttonMove: function(e) {
			var endPoint = e.touches[e.touches.length - 1] //获取拖动结束点
			//计算在X轴上拖动的距离和在Y轴上拖动的距离
			var translateX = endPoint.clientX - startPoint.clientX
			var translateY = endPoint.clientY - startPoint.clientY
			startPoint = endPoint //重置开始位置
			var buttonTop = this.data.buttonTop + translateY
			var buttonLeft = this.data.buttonLeft + translateX
			//判断是移动否超出屏幕
			if (buttonLeft + 50 >= this.data.windowWidth) {
				buttonLeft = this.data.windowWidth - 50;
			}
			if (buttonLeft <= 0) {
				buttonLeft = 0;
			}
			if (buttonTop <= 0) {
				buttonTop = 0
			}
			if (buttonTop + 50 >= this.data.windowHeight) {
				buttonTop = this.data.windowHeight - 50;
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 20px;
	}

	.head_top {
		width: 100%;
		height: 170rpx;
		position: absolute;
		z-index: -1;
		overflow: hidden;
		left: 0;
		top: 0;
	}

	.head_top::after {
		content: '';
		width: 140%;
		height: 170rpx;
		position: absolute;
		z-index: -1;
		left: -20%;
		top: 0;
		border-radius: 0 0 50% 50%;
		background: #00D0D0;
	}

	.head_tab {
		width: 702rpx;
		background: #fff;
		box-shadow: 0px 3rpx 15rpx rgba(0, 0, 0, 0.04);
		border-radius: 20rpx;
		margin: 10rpx auto 24rpx;
		box-sizing: border-box;
		padding: 36rpx 0 40rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.tab_item {
		width: 33.33%;
		font-size: 28rpx;
		color: #333333;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.tab_price {
		font-size: 50rpx;
		font-weight: bold;
		color: #00D0D0;
	}

	.tab_nv {
		width: 702rpx;
		height: 92rpx;
		background: linear-gradient(180deg, #00D0D0 0%, #00D0D0 100%);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 33rpx 0 48rpx;
		margin: 0 auto 33rpx;
		position: relative;
	}
	.flex-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tab_nv::after {
		content: "";
		position: absolute;
		width: 0px;
		height: 49rpx;
		border: 1rpx solid #FFFFFF;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.nv_icon {
		width: 50rpx;
		height: 50rpx;
		flex-shrink: 0;
		margin-right: 28rpx;
	}
	.nv_icon_1 {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
		margin-right: 28rpx;
	}

	.nv_text {
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.check_icon {
		width: 34rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.con {
		margin: 33rpx 24rpx;
	}

	.one_re {
		width: 160rpx;
		height: 60rpx;
		background: #00D0D0;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #FFF;
		padding: 0 30rpx 0 20rpx;
		margin-left: 33rpx;
	}

	.c_icon {
		width: 50rpx;
		height: 50rpx;
		flex-shrink: 0;
		border-radius: 50%;
	}
	.flex{
		display: flex;
	}

	.t_item {
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
		margin-right: 50rpx;
		flex-shrink: 0;
	}

	.t_item:last-child {
		margin-right: 0;
	}

	.t_active {
		color: #00D0D0;
		border-bottom: 2rpx solid #00D0D0;
	}

	.tab_lsit {
		position: relative;
	}

	.tab_lsit::after {
		content: "";
		position: absolute;
		width: 0px;
		height: 16rpx;
		border: 2rpx solid #00D0D0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.c_item {
		width: 702rpx;
		background: #fff;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 22rpx 24rpx 31rpx;
		margin: 0 auto 24rpx;
		font-size: 26rpx;
		color: #666666;
	}

	.mb36 {
		margin-bottom: 36rpx;
	}

	.guide_none_img {
		margin: 70rpx auto 43rpx;
		width: 376rpx;
		height: 256rpx;
		flex-shrink: 0;
	}

	.guide_no_txt {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #00D0D0;
	}

	.item_staus {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #00D0D0;
	}

	.error {
		color: #00D0D0;
	}

	.user_ava {
		width: 46rpx;
		height: 46rpx;
		flex-shrink: 0;
		border-radius: 50%;
		margin-right: 19rpx;
	}

	.user_name {
		font-size: 30rpx;
		color: #333333;
		white-space: nowrap;
		width: 400rpx;
	}

	.item_time {
		margin: 16rpx auto 18rpx;
	}

	.price {
		font-size: 32rpx;
		font-weight: bold;
		color: #00D0D0;
	}

	.fix_btn {
		width: 147rpx;
		height: 147rpx;
		position: fixed;
		right: 10px;
		top: 55%;
		z-index: 10;
		border-radius: 50%;
	}

	.status_icon {
		width: 27rpx;
		height: 27rpx;
		flex-shrink: 0;
		margin-right: 12rpx;
		border-radius: 50%;
	}

	.mt18 {
		margin-top: 18rpx;
	}
</style>
